<template>
	<view class="tabbar-page">
		<!-- <view style="margin-bottom: 30rpx;"> -->
		<view style="">
			<!-- <view class="Sliding">
				<Sliding></Sliding>
			</view> -->
			<!-- 放组件 -->
			<home v-show="PageCur==0&&!loading" ref="home" @onTabbar='onTabbar' @loadingEnd='loadingEnd'></home>
			<yishou v-show="PageCur==1&&!loading" ref="yishou" @loadingEnd='loadingEnd'></yishou>
			<star-map v-if="PageCur==2&&!loading" ref="starMap" @loadingEnd='loadingEnd'></star-map>
			<mine v-if="PageCur==3&&!loading" ref="mine" @loadingEnd='loadingEnd'></mine>
		</view>
		<view class="occupi"></view>
		<view class="tabbar">
			<view :class="PageCur == index?'tabcli':''" v-for="(item,index) in tabbar" :key="index"
				@tap="ontoggle(index)">
				<image class="tabbar-icon" :class="PageCur == index?'animation':''"
					:src="item.url + [PageCur == index?'cli':''] + '.png'"></image>
				{{item.name}}
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<xunUpgrade :nextVersion="nextVersion" :content="content" :androidUrl="androidUrl" iosUrl=""
			:forceable="forceable"></xunUpgrade>
		<!-- #endif -->
		<message-modal :isShow='captchaShow' @sendMobileCode='signOut'
			@close='captchaShow=false'></message-modal>
		<!-- <skeleton v-if="loading"></skeleton> -->
	</view>
</template>

<script>
	// import Sliding from "@/components/Sliding/Sliding.vue";
	import messageModal from './messageModal/messageModal.vue'
	import xunUpgrade from './xunUpgrade.vue'
	// 引入组件
	import home from '@/pages/home/home'
	import yishou from '@/pages/yishou/yishou'
	import starMap from '@/pages/star-map/star-map'
	import mine from '@/pages/mine/mine'
	export default {
		
		data() {
			return {
				captchaShow: false,
				forceable: '0',
				nextVersion: '0', //新app版本号
				androidUrl: '', //下载地址
				content: '', //更新内容
				loading: true,
				isSupport:true,
				PageCur: 0, //tab下标
				tabbar: [{ //tab数据
						name: '首页',
						url: '/static/images/tabbar/home',
					},
					{
						name: '山海异兽',
						url: '/static/images/tabbar/yishou',
					},
					{
						name: '魔幻地图',
						url: '/static/images/tabbar/map',
					},
					{
						name: '我的',
						url: '/static/images/tabbar/mine',
					}
				],
				isMap:1
			}
		},
		components: {
			// 注册组件
			home,xunUpgrade,messageModal,
			yishou,
			starMap,
			mine,
			// Sliding
		},
		onLoad(o) {
			this.getAppInfo()
			console.log(o.PageCur);
			if(o.PageCur=='undefined' || null ){
				this.PageCur = 0
			}else{
				this.PageCur = o.PageCur || 0
				if(o.PageCur==2){
					this.isMap = o.isMap
				}
			}
			
		},
		onReady() {
			setTimeout(() => {
				this.loading = false
			}, 500)
		},
		onShow() {
			console.log('this.PageCur,',this.PageCur);
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			uni.stopPullDownRefresh();
			if (this.PageCur == 0 || this.PageCur == 1) {
				this.$nextTick(() => {
					if (this.PageCur == 0) {
						this.$refs.home.getIndex()
					}
					if (this.PageCur == 1) {
						this.$refs.yishou.getCardInfo()
					}
					if (this.PageCur == 2) {
						// this.$refs.starMap.getIndex()
					}
					if (this.PageCur == 3) {
						this.$refs.mine.getCardInfo()
					}
				})
			}
		},
		methods: {
			signOut(){
				
			},
			async getAppInfo() {
				const res = await uni.$postRequest('/api/v1/version')
				if (res.code == 200) {
					let {
						code,
						desc,
						download,
						is_forced_update
					} = res.data
					const value = uni.getStorageSync('newV')
					console.log('newV',value);
					if(value != 1) return
					this.androidUrl = download
					this.nextVersion = code
					// this.nextVersion = '1.0.1'
					this.content = desc
					this.forceable = is_forced_update
					this.$store.commit('NEXT_V',code)
				} else {
					uni.showToast({
						icon:'none',
						title: '获取更新失败'
					})
				}
			},
			loadingEnd() {
				console.log('123');
				this.loading = false
				uni.stopPullDownRefresh();
				if (this.PageCur == 2) {
					console.log('123',this.isMap);
					this.$nextTick(()=>{
						console.log(this.$refs.starMap,'this.$refs.starMap.getIndex');
						this.$refs.starMap.getIndex(0,this.isMap)
					})
				}
			},
			ontoggle(i) {
				if (i == 2 || i == 3) {
					this.isSupport=true
					// 这里需要判断登录状态
					// #ifdef APP-PLUS
					const pages = getCurrentPages();
					const page = pages[pages.length - 1];  
					const currentWebview = page.$getAppWebview();
					currentWebview.setStyle({  
					  pullToRefresh: {  
					    support: this.isSupport,  
					    style: plus.os.name === 'Android' ? 'circle' : 'default'  
					  }  
					}); 
					// #endif
 
// this.isSupport = !this.isSupport;
				}else{
					// #ifdef APP-PLUS
					this.isSupport = true
					const pages = getCurrentPages();
					const page = pages[pages.length - 1];  
					const currentWebview = page.$getAppWebview();
					currentWebview.setStyle({  
					  pullToRefresh: {  
					    support: this.isSupport,  
					    style: plus.os.name === 'Android' ? 'circle' : 'default'  
					  }  
					}); 
					// #endif
				}
				if (this.PageCur == i) return
				// this.loading = true
				this.PageCur = i
				this.$nextTick(() => {
					if (this.PageCur == 0) {
						// this.$refs.home.getIndex()
					}
					if (this.PageCur == 1) {
						this.$refs.yishou.getCardInfo()
					}
					if (this.PageCur == 2) {
						// this.$refs.starMap.getIndex()
					}
					if (this.PageCur == 3) {
						this.$refs.mine.getCardInfo()
					}
				})
				setTimeout(() => {
					this.loading = false
				}, 500)
			},
			onTabbar(e) {
				this.PageCur = e
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tabbar-page {
		min-height: 100vh;
		background-color: #181922;
	}
	.Sliding{
		border: 1px solid #27ff92;
		top: 200rpx;
		left: 0;
		position: fixed;
		z-index: 10000000000;
	}

	.occupi {
		background-color: #181922;
		width: 750rpx;
		min-height: 120rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabbar {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 750rpx;
		min-height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #181922;
		font-size: 22rpx;
		color: rgba(255, 255, 255, .8);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 103;

		view {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
			}
		}

		.tabcli {
			color: #27ff92;
		}

		.tabbar-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.animation {
			animation: ada .7s;
		}

		@keyframes ada {
			0% {
				opacity: 0;
				transform: translateY(.9375rem);
			}

			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
</style>